<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 头部 -->
  <div class="Mall4j page-member-head">
    <div class="content">
      <a
        href="javascript:void(0)"
        class="logo"
      />
      <div class="nav">
        <router-link
          to="/member-center"
          href="javascript:void(0)"
          :class="['item', tabType === 0 ? 'active' : '']"
        >
          {{ $t('memberCenter.home') }}
        </router-link>
        <router-link
          to="/member-center/buy-member"
          href="javascript:void(0)"
          :class="['item', tabType === 1 ? 'active' : '']"
        >
          {{ $t('memberCenter.purchaseMembership') }}
        </router-link>
        <router-link
          to="/member-center/member-equity"
          href="javascript:void(0)"
          :class="['item', tabType === 2 ? 'active' : '']"
        >
          {{ $t('memberCenter.memberBenefits') }}
        </router-link>
        <router-link
          to="/member-center/integral-mall"
          href="javascript:void(0)"
          :class="['item', tabType === 3 ? 'active' : '']"
        >
          {{ $t('memberCenter.pointsMall') }}
        </router-link>
      </div>
      <div
        v-show="showMemberInfo"
        class="user"
      >
        <div class="user-box">
          <div class="img">
            <img
              v-if="userPic"
              :src="checkFileUrl(userPic)"
              alt
              @error="userPic = ''"
            >
            <img
              v-if="!userPic"
              src="@/assets/images/buyer-img.png"
              alt
            >
          </div>
          <div class="name">
            {{ memberInfo.nickName }}
          </div>
          <div :class="['grow-date',store.locale === 'en'?'en':'']">
            <div class="growth-box">
              <div class="text">
                {{ $t('memberCenter.growthValue') }}：
              </div>
              <div class="growth">
                <span
                  class="percent"
                  :style="{
                    width: (memberInfo.growth / memberInfo.nextGrowth) <1? (memberInfo.growth / memberInfo.nextGrowth) * 100 + '%' : '100%',
                    borderRadius: (memberInfo.growth / memberInfo.nextGrowth) <1 ? '12px 0 0 12px' : '12px',
                  }"
                />
                <span
                  v-if="memberInfo.nextGrowth && memberInfo.growth < memberInfo.nextGrowth"
                  class="number"
                >{{ memberInfo.growth }}/{{ memberInfo.nextGrowth }}</span>
                <span
                  v-else-if="!memberInfo.nextGrowth"
                  class="number"
                >{{ $t('memberCenter.memberFull') }}</span>
                <span
                  v-else
                  class="number"
                >{{ memberInfo.growth }} {{ $t('memberCenter.upgradeable') }}</span>
              </div>
              <div class="rank">
                {{ memberInfo.levelName }}
              </div>
            </div>
            <div
              v-if="memberInfo.levelType !== 0"
              class="date"
            >
              <div class="text">
                {{ $t('memberCenter.expirationDate') }}：
              </div>
              <div class="time">
                {{ memberInfo.endTime }} {{ $t('memberCenter.expiration') }}
              </div>
            </div>
          </div>
        </div>
        <a
          href="javascript:void(0)"
          class="out"
          @click="loginOut"
        >{{ $t('memberCenter.logout') }}</a>
      </div>
    </div>
  </div>
  <!-- /头部 -->
</template>

<script setup>
import Cookie from 'vue-cookies'
import { checkFileUrl } from '@/utils/index.js'

const userStore = useUserStore()
const router = useRouter()
const tabType = ref(0)
const path = router.currentRoute.value.path

const userPic = ref('') // 会员头像
const showMemberInfo = ref(false)
const store = useLanguageStore()

const props = defineProps({
  memberInfor: {
    type: Object,
    default: () => {}
  }
})
const memberInfo = ref({})
// 用户信息
watch(() => props.memberInfor,
  (val) => {
    memberInfo.value = val
  })

onMounted(() => {
  path === '/member-center' ? showMemberInfo.value = false : showMemberInfo.value = true
  const pathIndex = path.indexOf('/', path.indexOf('/') + 1)
  const currentPath = path.substring(pathIndex + 1)
  if (currentPath === 'member-center') {
    tabType.value = 0
  } else if (currentPath === 'buy-member') {
    tabType.value = 1
  } else if (currentPath === 'member-equity') {
    tabType.value = 2
  } else if (currentPath === 'integral-mall') {
    tabType.value = 3
  }
  // 获取会员头像
  userPic.value = userStore.userAvatar
  if (showMemberInfo.value) {
    http.get('/p/score/scoreLevel/page?levelType=' + 0).then(({ data }) => {
      getVipInternationalization(data)
      memberInfo.value = data
    })
  }
})

/**
 * 退出登录
 */
const route = useRoute()
const loginOut = () => {
  http.post('/logOut').then(() => {
    const user = {
      nickName: '',
      userAvatar: ''
    }
    userStore.setUser(user)
    Cookie.remove('bbcToken')
    window.localStorage.clear()
    route.path === '/' ? location.reload() : router.push({ path: '/' })
  })
}
// 国际化
const getVipInternationalization = (data) => {
  if (!data?.userLevel) return
  const lang = Cookie.get('bbcLanguage') || 'zh_CN'
  let levelNameCn, levelNameEn
  if (!data.userLevel.userLevelLangList) return
  data.userLevel.userLevelLangList.forEach(val => {
    if (val.lang === 0) {
      levelNameCn = val.levelName
    }
    if (val.lang === 1) {
      levelNameEn = val.levelName
    }
  })
  data.levelName = lang === 'zh_CN' ? levelNameCn : levelNameEn || levelNameCn
}

</script>

<style lang="scss" scoped>
@use '../../views/member-center/index.scss';
</style>
